<template>
  <div class="row">
    <div class="col-sm-12 col-md-8">
      <!-- 新的煲仔饭 -->
      <newbz></newbz>
    </div>
    <div class="col-sm-12 col-md-4">
      <h3 class="text-muted my-5">菜单</h3>
      <table class="table">
        <thead class="table table-default">
          <tr>
            <th>品种</th>
            <th>删除</th>
          </tr>
        </thead>
        <tbody v-for="item in getMenuItems" :key="item.name">
          <tr>
            <td>{{item.name}}</td>
            <td>
              <button @click="deleteData(itme)" class="btn btn-outline-danger btn-sm">&times;</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import newbz from "./newbz";
export default {
  name: "Admin",
  data() {
    return {
      // getMenuItems: []
    };
  },
  components: {
    newbz
  },
  computed: {
    getMenuItems: {
      //vuex中获取数据
      //...mapState(["menuItems"])
      get() {
         return this.$store.getters.getMenuItems
        //return this.$store.state.menuItems;
      },
      set() {}
    }
  },
  created() {
    fetch("https://pizza-10aa1.firebaseio.com/menu.json")
      .then(res => {
        return res.json();
      })
      .then(data => {
        // console.log(data);
        let meunArry = [];
        for (let key in data) {
          // console.log(data[key]);
          data[key].id = key;
          meunArry.push(data[key]);
        }
        //this.getMenuItems = meunArry;
        //console.log(this.getMenuItems);
        //数据同步
        this.$store.commit("setMenuItems", meunArry);
      });
  },

  methods: {
    deleteData(item) {
      fetch("https://pizza-10aa1.firebaseio.com/menu/" + item.id + "/.json", {
        method: "DELETE",
        headers: {
          "Conten-type": "application/json"
        }
      })
        .then(ers => res.json())
        .then(data => {
          this.$store.commit("removeMenuItems", item);
        });
    }
  }
};
</script>

<style  scoped>
</style>
